//webpack 基于node
const path=require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

module.exports={
    optimization: {  //优化项
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    mode: "development",  // 模式 默认两种 production development
    entry:'./src/index.js',  //入口
    output:{
        filename: "index.js?v=[hash:8]", //打包后的文件
        path: path.resolve(__dirname,'build'), //路径必须是一个绝对路径
      //  publicPath: "http://www.wang.cn"
    },
    plugins: [  //数组  存放webpack的插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',//文件路径
            filename: "index.html",
        }),
        new MiniCssExtractPlugin({
            filename:"css/main.css"
        }),
        new webpack.ProvidePlugin({  //在每个模块中都注入jquery 的 $ 全局注入
            '$': 'jquery'
        })
    ],
    externals: {  //打包忽略 jQuery
      jquery:"jQuery"
    },
    module: {  //模块
        //loader
        rules:[
            {
                test:/\.html$/,
                use:'html-withimg-loader'
            },
            {test:/\.(png|jpg|gif)$/,
                //做一个限制 当图片小于多少k的时候 用base64 来转化否则用file-loader产生真实的图片
                use:{loader:'url-loader',options:{
                    limit:1,
                        outputPath:'/img/',
                        publicPath:'http://localhost:8081/'
                    }}},
            {test:/\.js$/,
            exclude: /(node_modules|bower_components)/,
                use:
                    {
                        loader:'babel-loader',//用babel-loader es6 =>es5
                        options:{
                            presets:[
                                '@babel/preset-env'
                            ],
                            plugins:[
                                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                                ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                            ]
                        }
                    }
                },
            //规则  css-loader  支持@import语法
            {test:/\.css$/,
            use:[
                    MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },
                {
                    loader: 'postcss-loader',
                    options:{
                        ident: 'postcss',
                        sourceMap: true,
                        config: {
                            path: path.resolve('./postcss.config.js') // 依据自己的项目结构引用文件目录
                        }
                    }
                }
                ]
            },
            {test:/\.less$/,
            use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',  //@import 解析路径

                    'less-loader'  , //把less -> css
                {
                    loader: 'postcss-loader',
                    options:{
                        ident: 'postcss',
                        sourceMap: true,
                        config: {
                            path: path.resolve('./postcss.config.js') // 依据自己的项目结构引用文件目录
                        }
                    }
                }
                ]
            }

        ]
    }
}
